<template>
  <div class="myOrder-container">
    <div class="chooseadress" @click="toaddress">新增地址</div>
    <div class="adsbox">
      <van-address-list class="chooseadlist" v-model="chosenAddressId" :list="items" @edit="onEdit"
        @select="Suk_saveadv" />
    </div>
    <van-list :finished="finished" finished-text="没有更多了" @load="onLoad">
      <div
        style="width:90%;margin:0 auto;border:1px solid #f2f2f2;border-radius:0.2rem;background:#fff;margin-top: 0.3rem;">
        <div class="myOrder-list">
          <div class="list-left">
            <div>
              <img class="left-img" :src="shopimg?shopimg:noneimg">
              <div class="left-title">
                <p style="font-size:0.4rem;color:#000">
                  {{shopname}}
                  <img class="left-icon" src="@/assets/img/icon_grzx_xl.png">
                </p>
                <span class="left-detail">{{time}}</span>
              </div>
            </div>
          </div>
          <div class="list-left">
            <div style="width:100%">
              <div class="left-img" style="height:0"></div>
              <div v-for="(item, index) in list" :key="index" class="caidanlist">
                <div class="left-name">{{item.product_name}} x {{ item.number }}</div>
                <div class="right-money">￥{{ item.price }}</div>
              </div>
              <div class="discountselect">
                <div>代金券</div>
                <div style="display:flex;align-items:center" @click="Suk_showdiscount">
                  {{ discountmoney?discountmoney:'请选择' }}
                  <van-icon name="arrow" />
                </div>
                <van-popup v-model="showList" position="bottom" class="discontbox">
                  <div class="discountlistbox">
                    <h1 class="dishr">可使用优惠券({{ disnum }})</h1>
                    <div v-for="(item,index) in dislist" :key="index" class="disbox" @click="Suk_tocheckdis(index)">
                      <div class="disleft">
                        <p class="dismoney" v-if="item.dinName!=null">{{ item.dinName }}</p>
                        <p class="dismoney" v-else>通用劵</p>
                        <p class="dismoney">￥{{ item.money }}</p>
                        <p class="distotal">满{{ item.total }}元使用</p>
                      </div>
                      <div class="disright">
                        <p class="distit" v-if="item.type == 2">通用券</p>
                        <p class="distit" v-if="item.type == 1">满减券</p>
                        <p class="distime">有效期：{{ item.time.substr(0,10) }} - {{ item.stopTime }}</p>
                      </div>
                      <div class="checkdisimgbox">
                        <img src="@/assets/img/icon_fbpl_g.png" class="checkdisimg" v-if="hascheck == index">
                      </div>
                    </div>
                  </div>
                  <div class="closedisbox" @click="Suk_colsedis">不使用优惠券</div>
                </van-popup>
                <!-- 优惠券单元格 -->
              </div>
            </div>
          </div>
          <div style="width:100%;text-align:right;color:#000;font-size:0.4rem;margin-top:0.1rem;margin-bottom:0.1rem">
            小计：￥{{rate}}</div>
          <div v-if="discountmoney"
            style="width:100%;text-align:right;color:#000;font-size:0.4rem;margin-top:0.1rem;margin-bottom:0.1rem">
            折后：￥{{rate - discountmoney}}</div>
          <div class="list-left">
            <div></div>
            <!-- <div>
            <van-button class="list-btn" v-if="true" type="default">评价订单</van-button>
            <van-button class="list-btn" v-if="false" type="default">再来订单</van-button>
            </div>-->
          </div>
        </div>
      </div>
    </van-list>
    <div class="btmbtn">
      <div class="paytit" v-if="discountmoney == 0"></div>
      <div class="paytit" v-if="discountmoney">已优惠￥{{ discountmoney }}</div>
      <div class="topay" @click="Suk_pay">去下单</div>
      <van-popup v-model="show" position="bottom">
        <div class="paybox jiushibox">
          <div @click="Suk_canlepay">取消</div>
          <div :index="0" @click="Suk_checkpay1" style="position:relative">
            <div class="payimgbox">
              <img src="@/assets/img/icon_ddxqzf_zfb.png" class="payicon">
            </div>
            <div class="paytextbox">
              <p class="paytext1">支付宝</p>
              <p class="paytext">推荐支付宝用户使用</p>
              <img src="@/assets/img/icon_ddxqzf_xz.png" v-if="checkpaytp == 0" class="gou">
            </div>
          </div>
          <div :index="1" @click="Suk_checkpay2" style="position:relative">
            <div class="payimgbox">
              <img src="@/assets/img/icon_ddxqzf_wxzf.png" class="payicon">
            </div>
            <div class="paytextbox">
              <p class="paytext1">微信支付</p>
              <p class="paytext">推荐微信用户使用</p>
              <img src="@/assets/img/icon_ddxqzf_xz.png" v-if="checkpaytp == 1" class="gou">
            </div>
          </div>
          <div></div>
        </div>
        <div class="tabmoney" @click="Suk_yespay">确认支付{{rate - discountmoney}}元</div>
      </van-popup>
    </div>
  </div>
</template>
<script>
  // const coupon = ;
  export default {
    data() {
      return {
        addressId: 0,
        hascheck: null,
        dislist: [], //这是优惠券列表
        disnum: 0, // 这是优惠券的数量
        showList: false,
        shopname: null, //店铺名称
        shopimg: null, //店铺图片
        noneimg: require("@/assets/img/none.png"),
        address: null, //这是用户地址
        phone: null, //这是用户手机号
        name: null, //这是用户的姓名
        value: "",
        discountmoney: 0,
        checkpaytp: 0,
        chosenAddressId: null,
        img: require("@/assets/img/img_msxp.png"),
        time: `2018年01月日`,
        items: [],
        rate: 0,
        afterrate: null,
        list: [],
        finished: false,
        show: false
      };
    },
    // activated() {
    //   this.getaddresslisty();
    //   this.Suk_getlist();
    //   this.Suk_tochoosediscount()
    // },

    created() {
      this.getaddresslisty();
      this.Suk_getlist();
      this.Suk_tochoosediscount();
    },

    methods: {
      // 这里是我们的选择优惠券
      Suk_tocheckdis(index) {
        let that = this;
        that.hascheck = index;
        console.log(that.dislist[index].total);
        let dinid = localStorage.getItem(
          "storeid",
        );
        if(that.dislist[index].dinId!=dinid && that.dislist[index].dinId!=null && that.dislist[index].dinId!='null' && that.dislist[index].dinId!=''){
          that.$toast({
            message: "不能使用该优惠券,使用店铺不对应"
          });
          that.hascheck = null
        }else if (parseInt(that.dislist[index].total) > that.rate) {
          that.$toast({
            message: "不能使用该优惠券,金额未达标"
          });
          that.hascheck = null
        } else {
          localStorage.setItem("countid", that.dislist[index].id);
          that.discountmoney = that.dislist[index].money;
          // that.rate = that.rate - that.discountmoney
          that.showList = false;
        }
      },
      // 关闭并且不使用优惠券
      Suk_colsedis() {
        let that = this;
        that.hascheck = null;
        that.discountmoney = 0;
        localStorage.removeItem("countid");
        that.showList = false;
      },
      // 打开优惠券
      Suk_showdiscount() {
        let that = this;
        // that.rate = that.rate + that.discountmoney
        that.showList = true;
      },
      // 下面的是切换地址的选择
      Suk_saveadv(e) {
        let that = this;
        console.log(e);
        // that.chosenAddressId = e.id
        that.address = e.address;
        that.phone = e.tel;
        that.name = e.name;
        that.addressId = e.id;
      },
      Suk_getlist() {
        let that = this;
        that.$toast.loading({
          message: "加载中..."
        });
        var Sukdata = {
          shoppingId: localStorage.getItem("payid"),
          userId: localStorage.getItem("userid"),
          dinId: localStorage.getItem("storeid")
        };
        // console.log(Sukdata);
        that.axios
          .post(
            that.baseUrl + "/shopp/addShoppinges",
            that.Qs.stringify(Sukdata), {
              headers: {
                "Content-Type": "application/x-www-form-urlencoded"
              }
            }
          )
          .then(function(res) {
            if (res.request.status === 200) {
              if (res.data.meta.code == 200) {
                console.log(res.data, "payorder");
                that.shopname = res.data.data.dining[0].diningName;
                that.shopimg = res.data.data.dining[0].logo;
                that.list = res.data.data.shopp;
                that.rate = res.data.data.total;
                that.time = res.data.data.addtime;
                that.$toast.clear();
              } else if (res.data.meta.code == 501) {}
            }
          });
      },
      //这是我们的选择支付宝
      Suk_checkpay1() {
        let that = this;
        that.checkpaytp = 0;
      },
      //这是我们的选择微信支付
      Suk_checkpay2() {
        let that = this;
        that.checkpaytp = 1;
      },
      //这是获取我们的地址列表
      getaddresslisty() {
        let that = this;
        that.$toast.loading({
          message: "加载中..."
        });
        var Sukdata = {
          userId: localStorage.getItem("userid")
        };
        // console.log(Sukdata);
        that.axios
          .post(
            that.baseUrl + "/address/addressList",
            that.Qs.stringify(Sukdata), {
              headers: {
                "Content-Type": "application/x-www-form-urlencoded"
              }
            }
          )
          .then(function(res) {
            if (res.request.status === 200) {
              if (res.data.meta.code == 200) {
                console.log(res.data, "address");
                that.items = res.data.data.list;
                // that.chosenAddressId = res.data.data[0].id;
                for (let i = 0; i < res.data.data.list.length; i++) {
                  that.items[i].tel = res.data.data.list[i].phone;
                  that.items[i].address = res.data.data.list[i].address+res.data.data.list[i].detail;
                }
                that.$toast.clear();
              } else if (res.data.meta.code == 501) {}
            }
          });
      },
      onBtn(e) {
        let index = e.currentTarget.getAttribute("index");
        // console.log(this.list[index]);
      },
      toaddress() {
        this.$router.push({
          name: "editAddress"
        });
      },
      Suk_canlepay() {
        let that = this;
        that.show = 0;
      },
      Suk_yespay() {
        let that = this;
        let alltotal = that.rate - that.discountmoney;
        if (that.checkpaytp == 0) {
          that.$toast.loading({
            message: "加载中..."
          });
          var Sukdata = {
            orderInfoId: localStorage.getItem("payid"),
            totalMoney: alltotal
          };
          that.axios
            .post(that.baseUrl + "/order/zhifuibao", that.Qs.stringify(Sukdata), {
              headers: {
                "Content-Type": "application/x-www-form-urlencoded"
              }
            })
            .then(function(res) {
              if (res.request.status === 200) {
                if (res.data.meta.code == 200) {
                  console.log(res.data);
                  dsBridge.call("zfb_pay", res.data);
                  that.$router.push({
                    name: "myOrder"
                  });
                  that.$toast.clear();
                } else if (res.data.meta.code == 501) {}
              }
            });
        } else if (that.checkpaytp == 1) {
          that.$toast.loading({
            message: "加载中..."
          });
          var Sukdata = {
            orderInfoId: localStorage.getItem("payid"),
            totalMoney: alltotal
          };
          that.axios
            .post(that.baseUrl + "/order/fuKuan", that.Qs.stringify(Sukdata), {
              headers: {
                "Content-Type": "application/x-www-form-urlencoded"
              }
            })
            .then(function(res) {
              if (res.request.status === 200) {
                if (res.data.meta.code == 200) {
                  console.log(res.data);
                  dsBridge.call("wx_pay", res.data);
                  that.$router.push({
                    name: "myOrder"
                  });
                  that.$toast.clear();
                } else if (res.data.meta.code == 501) {}
              }
            });
        }
      },
      // 这里是我们的生成订单的操作
      Suk_pay() {
        let that = this;
        if(localStorage.getItem("largeid")==7){

          that.$dialog
            .confirm({
              title: "此商店需要线下核销用餐",
              message: "确定前去食堂用餐？"
            })
            .then(() => {
              that.showpay()
            })
            .catch(()=>{
              return
            })

        }else{
          that.showpay()
        }

      },
      showpay(){
        let  that= this
        if (that.chosenAddressId == null) {
          that.$toast.fail({
            message: "请选择地址！"
          });
        } else {
          that.$toast.loading({
            message: "加载中..."
          });
          var Sukdata = {
            userId: localStorage.getItem("userid"),
            shoppingId: localStorage.getItem("payid"),
            myId: localStorage.getItem("countid"),
            shopName: that.name,
            shopPhone: that.phone,
            shopAddress: that.address,
            addId: that.addressId
          };
          that.axios
            .post(
              that.baseUrl + "/order/insertOrderInfo",
              that.Qs.stringify(Sukdata), {
                headers: {
                  "Content-Type": "application/x-www-form-urlencoded"
                }
              }
            )
            .then(function(res) {
              if (res.request.status === 200) {
                if (res.data.meta.code == 200) {
                  console.log(res.data);
                  console.log(res.data.data.data[0].orderInfoId, "orderid");
                  localStorage.setItem(
                    "payid",
                    res.data.data.data[0].orderInfoId
                  );
                  if (res.data.data.data.length > 0) {
                    that.show = true;
                    that.$toast.success({
                      message: "下单成功！"
                    });
                  }
                  that.$toast.clear();
                } else if (res.data.meta.code == 501) {}
              }
            });
        }
      },
      onAdd() {
        // this.$Toast('新增地址');
      },
      onEdit(item, index) {
        let that = this;
        that.$router.push({
          name: "editAddress",
          params: {
            // 'editadd':[that.list[index].id,that.list[index].name,that.list[index].address,that.list[index].detail,that.list[index].phone],
            name: that.items[index].name,
            id: that.items[index].id,
            area: that.items[index].address,
            detail: that.items[index].detail,
            phone: that.items[index].phone
          }
        });
      },
      // 这里是到我们的优惠券选择
      Suk_tochoosediscount() {
        let that = this;
        that.$toast.loading({
          message: "加载中..."
        });
        var Sukdata = {
          userId: localStorage.getItem("userid")
        };
        console.log(Sukdata);
        that.axios
          .post(that.baseUrl + "/myCoupon/query", that.Qs.stringify(Sukdata), {
            headers: {
              "Content-Type": "application/x-www-form-urlencoded"
            }
          })
          .then(function(res) {
            if (res.request.status === 200) {
              if (res.data.meta.code == 200) {
                if (res.data.data == "查无数据") {
                  that.dislist = null;
                  that.$toast.clear();
                } else {
                  that.dislist = res.data.data;
                  that.disnum = res.data.data.length;
                  console.log(res.data.data, "red");
                  that.$toast.clear();
                }
              } else if (res.data.meta.code == 501) {}
            }
          });
      },
      onLoad() {
        // 异步更新数据
        // setTimeout(() => {
        //   for (let i = 0; i < 10; i++) {
        //     this.list.push({
        //       img: require("@/assets/img/img_msxp.png"),
        //       time: `2018年01月${i}日`,
        //       rate: 4.6,
        //       name: "二中烤热面筋",
        //       detail: "订单已到达"
        //     });
        //   }
        //   // 数据全部加载完成
        //   if (this.list.length >= 40) {
        //     this.finished = true;
        //   }
        // }, 500);
      }
    }
  };
</script>
<style lang="scss" scoped>
  .myOrder-container {
    padding-bottom: 4rem;
  }

  .btmbtn {
    position: fixed;
    display: flex;
    line-height: 1.5rem;
    justify-content: space-between;
    bottom: 0;
    z-index: 9999;
    align-items: center;
    background: #fff;
    height: 1.7rem;
    width: 100%;
  }

  .left-title {
    display: inline-block;
    margin-left: 0.3rem;
  }

  .left-detail {
    color: #919191;
    font-size: 0.22rem;
  }

  .left-icon {
    margin-left: 0.32rem;
    height: 0.28rem;
    vertical-align: middle;
  }

  .left-name {
    display: inline-block;
    font-size: 0.4rem;
  }

  .list-btn {
    height: 0.82rem;
    line-height: 0.8rem;
    width: 2.5rem;
    font-size: 0.32rem;
  }

  .chooseadress {
    width: 90%;
    text-align: center;
    height: 1.3rem;
    line-height: 1.3rem;
    background: #ff2f4e;
    color: #fff;
    font-size: 0.5rem;
    margin: 0 auto;
    margin-top: 0.2rem;
    margin-bottom: 0.2rem;
    border: 1px solid #f2f2f2;
    border-radius: 0.2rem;
  }

  .list-rate {
    display: inline-block;
  }

  .myOrder-container {
    font-size: 0.3rem;
    width: 100%;
    height: 100%;
    padding-bottom: 2rem;
    background: #f2f2f2;
  }

  .myOrder-list {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0.32rem 0.3rem 0.4rem;
    /* height: 3.8rem; */
    box-sizing: border-box;
    /* border-bottom: 1px solid #f2f2f2; */
  }

  .list-left {
    width: 100%;
    display: flex;
    justify-content: space-between;
  }

  .left-img {
    display: inline-block;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 0.05rem;
  }

  .caidanlist {
    width: 100%;
    display: flex;
    justify-content: space-between;
  }

  .right-money {
    display: inline-block;
    float: right;
  }

  .topay {
    width: 30%;
    height: 1.7rem;
    line-height: 1.7rem;
    text-align: center;
    background: #ff2f4e;
    color: #fff;
    font-size: 0.4rem;
  }

  .paytit {
    font-size: 0.4rem;
    color: #000;
    text-indent: 0.5rem;
  }

  .chooseadlist {
    padding-bottom: 0.5rem;
  }

  .jiushibox {
    width: 90%;
    margin: 0 auto;
  }

  .payicon {
    width: 0.9rem;
    height: 0.9rem;
  }

  .payimgbox {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .payimgbox {
    display: inline-block;
    vertical-align: center;
  }

  .paytextbox {
    display: inline-block;
    vertical-align: center;
    margin-left: 0.3rem;
  }

  .paytext {
    height: 0.5rem;
  }

  .paytext1 {
    height: 0.5rem;
    color: #000;
    font-size: 0.4rem;
  }

  .tabmoney {
    background: #f11730;
    text-align: center;
    font-size: 0.4rem;
    color: #fff;
  }

  .gou {
    position: absolute;
    width: 0.4rem;
    height: 0.28rem;
    top: 1rem;
    right: 1rem;
  }

  .discountselect {
    margin-top: 0.3rem;
    margin-bottom: 0.2rem;
    display: flex;
    justify-content: space-between;
    font-size: 0.4rem;
    color: #000;
  }

  .showdiscountbox {
    padding: 0;
  }

  .discontbox {
    background: #f8f8f8;
    padding-bottom: 1.8rem;
    font-size: 0.3rem;
  }

  .disbox {
    background: #fff;
    border: 1px solid #e9e9e9;
    border-radius: 0.1rem;
    // box-shadow:0rem 0.001rem 0.1rem 0rem #919191;
    width: 90%;
    margin: 0 auto;
    margin-bottom: 0.4rem;
    margin-top: 0.1rem;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding-top: 0.3rem;
    padding-bottom: 0.4rem;

    .disleft {
      margin-left: 0.5rem;
    }

    .disright {
      margin-right: 0.5rem;
    }

    .dismoney {
      color: #f44;
      font-size: 0.6rem;
    }

    .distit {
      font-size: 0.5rem;
    }
  }

  .dishr {
    width: 100%;
    text-align: center;
    font-weight: 500;
    font-size: 0.5rem;
    padding: 0.3rem;
    border-bottom: 0.1rem solid #f44;
    border-bottom-left-radius: 0.1rem;
    border-bottom-right-radius: 0.1rem;
  }

  .closedisbox {
    text-align: center;
    background: #fff;
    font-size: 0.5rem;
    height: 1.5rem;
    line-height: 1.5rem;
    border-top: 1px solid #e9e9e9;
  }

  .checkdisimgbox {
    position: absolute;
    right: 1rem;
    width: 0.55rem;
    height: 0.55rem;

    .checkdisimg {
      width: 100%;
      height: 100%;
    }
  }

  .adsbox {
    max-height: 7.5rem;
    overflow: auto;
  }
</style>
